<template>
    <div>
        <div v-if="currentPanel == 'list'">
            <!-- 导航 -->
<!--            <el-breadcrumb separator-class="el-icon-arrow-right">-->
<!--                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>-->
<!--                <el-breadcrumb-item>群欢迎语</el-breadcrumb-item>-->
<!--            </el-breadcrumb>-->

            <div
                style="padding: 8px; background: rgb(230,247,255); border: 1px solid rgb(220,243,254); margin: 30px 0 20px 0; color: #666">
                建议统一使用众哲鑫入群欢迎语功能进行管理。因企业微信接口限制， 在[企业微信后台]群欢迎语素材库进行编模或删除操作，不会同步更新
            </div>
            <!-- 搜索筛选 -->
            <el-card>
                <el-button size="small" icon="el-icon-plus" type="primary" @click="show">新建入群欢迎语</el-button>
                <!--                    <el-input size="small" v-model="formInline.name" placeholder="请输入要搜索的欢迎语"-->
                <!--                              style="width: 10%"></el-input>-->
            </el-card>

            <div class="interspaceH"></div>

            <el-card class="box-card">
                <!--列表-->
                <el-table size="small" :data="listData" style="width: 100%;">
                    <el-table-column align="center" type="selection" width="60">
                    </el-table-column>
                    <el-table-column prop="welcomeMessage" label="消息内容" width="250">
                    </el-table-column>
                    <el-table-column prop="welcomeType" label="类型" width="200">
                    </el-table-column>
                    <el-table-column prop="createPerple" label="创建人" width="250">
                    </el-table-column>
                    <el-table-column prop="createTime" label="创建时间" width="200">
                    </el-table-column>
                    <el-table-column align="center" label="操作" min-width="250">
                        <template slot-scope="scope">
                            <el-button type="text" @click="xiangqing(scope.row)">详情</el-button>
                            <el-button type="text" @click="bianji(scope.row)">&nbsp;编辑&nbsp;</el-button>
                            <el-button type="text" @click="deleteWelcome(scope.row)">&nbsp;删除&nbsp;</el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <!-- 分页 -->
                <!-- 分页 -->
                <el-pagination @size-change="queryDataHandle(pagePagination.currentPage,$event)"
                               @current-change="queryDataHandle($event,pagePagination.pageSize)"
                               :current-page="pagePagination.currentPage"
                               :page-sizes="pagePagination.pageSizes" :page-size="pagePagination.pageSize"
                               layout="total, sizes, prev, pager, next"
                               :total="pagePagination.total">
                </el-pagination>
            </el-card>
        </div>

        <div v-if="currentPanel == 'detail'">
            <WelcomeDetail @currentHandler="currentHandler" :rowId="data.id"></WelcomeDetail>
        </div>

        <div v-if="currentPanel == 'save'">
            <WelcomeSave @currentHandler="currentHandler"></WelcomeSave>
        </div>

        <!--详情-->
        <el-dialog title="入群欢迎语素材详情" :visible.sync="detailView" width="30%">
            <el-form ref="form" :model="detailForms" label-width="80px">
                <el-form-item label="类型">
                    <el-input v-model="detailForms.welcomeType" disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="创建人">
                    <el-input v-model="detailForms.createPerple" disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="创建时间">
                    <el-input v-model="detailForms.createTime" disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="文本消息">
                    <el-input v-model="detailForms.welcomeMessage" disabled="true"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button @click="close()">返回</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <!--编辑-->
        <el-dialog title="编辑" :visible.sync="edit" width="40%">
            <el-form ref="form" :model="editForm">
                <el-row>
                    <el-col :span="4">文本信息：</el-col>
                    <el-col :span="20">
                        <div style="height: 150px; width: 90%; border: 1px solid #d7d7d7; border-radius: 8px;">
                            <div style="border-bottom: 1px solid #d7d7d7; padding: 6px; color: rgb(250,140,21)">
                                [插入客户名称]
                            </div>
                            <el-input type="textarea" :rows="5" placeholder="请输入内容"
                                      v-model="editForm.welcomeMessage">
                            </el-input>
                        </div>
                    </el-col>
                </el-row>

<!--                <el-row>-->
<!--                    <el-col :span="4">其他信息：</el-col>-->
<!--                    <el-col :span="20">-->
<!--                        <div style="width: 90%">-->
<!--                            <el-card>-->
<!--                                &lt;!&ndash; 图片 &ndash;&gt;-->
<!--                                <div v-if="messageType == 1" style="padding: 10px;">-->
<!--                                    <el-upload-->
<!--                                        :action="$uri + '/api/file/upload'"-->
<!--                                        :data="{type:'2'}"-->
<!--                                        ref="uploadAddImg"-->
<!--                                        list-type="picture-card"-->
<!--                                        :on-remove="handleRemove"-->
<!--                                        :on-success="handleAvatarSuccess"-->
<!--                                        :on-change="handleAvatarChangeImg"-->
<!--                                        :auto-upload="false" style="width: 80%;">-->
<!--                                    </el-upload>-->
<!--                                    <i class="el-icon-plus"></i>-->
<!--                                    <img v-if="editForm.welcomeAppendices" :src="editForm.welcomeAppendices" class="avatar">-->
<!--                                    支持JPG,PNG格式，大小不超过2M-->
<!--                                </div>-->
<!--                                &lt;!&ndash; 链接 &ndash;&gt;-->
<!--                                <div v-if="messageType == 2" style="padding: 10px;">-->
<!--                                    <el-input placeholder="请输入链接地址" v-model="editForm.name">-->
<!--                                        <template slot="prepend">Http://</template>-->
<!--                                    </el-input>-->
<!--                                    <div>-->
<!--                                        高级设置：-->
<!--                                        <el-switch-->
<!--                                            v-model="value"-->
<!--                                            active-color="#13ce66"-->
<!--                                            inactive-color="#ff4949">-->
<!--                                        </el-switch>-->
<!--                                        开启后可自定义标题、摘要和封面图-->
<!--                                    </div>-->

<!--                                    <div v-if="value">-->
<!--                                        <el-row>-->
<!--                                            <el-col :span="4">链接标题</el-col>-->
<!--                                            <el-col :span="20">-->
<!--                                                <el-input-->
<!--                                                    type="text"-->
<!--                                                    placeholder="请输入链接标题"-->
<!--                                                    v-model="textTitle"-->
<!--                                                    maxlength="50"-->
<!--                                                    show-word-limit>-->
<!--                                                </el-input>-->
<!--                                            </el-col>-->
<!--                                        </el-row>-->
<!--                                        <el-row>-->
<!--                                            <el-col :span="4">链接摘要</el-col>-->
<!--                                            <el-col :span="20">-->
<!--                                                <el-input-->
<!--                                                    type="text"-->
<!--                                                    placeholder="请输入链接摘要"-->
<!--                                                    v-model="textMessage"-->
<!--                                                    maxlength="50"-->
<!--                                                    show-word-limit>-->
<!--                                                </el-input>-->
<!--                                            </el-col>-->
<!--                                        </el-row>-->
<!--                                        <el-row>-->
<!--                                            <el-col :span="4">链接封面</el-col>-->
<!--                                            <el-col :span="20">-->
<!--                                                <el-upload-->
<!--                                                    :action="$uri + '/api/file/upload'"-->
<!--                                                    :data="{type:'2'}"-->
<!--                                                    ref="uploadAddImg"-->
<!--                                                    list-type="picture-card"-->
<!--                                                    :on-remove="handleRemove"-->
<!--                                                    :on-success="handleAvatarSuccess"-->
<!--                                                    :on-change="handleAvatarChangeImg"-->
<!--                                                    :auto-upload="false" style="width: 80%;">-->
<!--                                                    <i class="el-icon-plus"></i>-->
<!--                                                </el-upload>-->
<!--                                                <img :src="require('@/assets/img/Pdf.png')" class="avatar">-->
<!--                                            </el-col>-->
<!--                                        </el-row>-->
<!--                                    </div>-->
<!--                                </div>-->
<!--                                &lt;!&ndash; 小程序 &ndash;&gt;-->
<!--                                <div v-if="messageType == 3" style="padding: 10px;">-->
<!--                                    <div-->
<!--                                        style="background: rgb(230,247,255); border: 1px solid rgb(145,213,255); padding: 5px;">-->
<!--                                        只有在企业微信后台绑定的小程序才可在此添加哦。-->
<!--                                    </div>-->

<!--                                    <div class="xcx" @click="xcx = true">-->
<!--                                        <i class="el-icon-circle-plus-outline"></i>-->
<!--                                        <div>添加小程序</div>-->
<!--                                    </div>-->
<!--                                </div>-->
<!--                            </el-card>-->
<!--                        </div>-->
<!--                    </el-col>-->
<!--                </el-row>-->
                <el-row>
                    <el-col :span="4">消息提醒：</el-col>
                    <el-col :span="20" style=" width: 80%;">
                        <el-switch v-model="editForm.status"></el-switch>
                        开启后，新建该条欢迎语将会通过[客户群]群发通知企业全部员工:管理员创建了新的入群欢迎语
                        <el-link type="primary">查看示例</el-link>
                    </el-col>
                </el-row>
            </el-form>
            <br>
            <div slot="footer" class="dialog-footer" style="text-align: center;">
                <el-button @click="back()">取消</el-button>
                <el-button type="primary" @click="editWelcome()">确定</el-button>
            </div>
<!--            <div class="right" style="float: left;">-->
<!--                <iframe src="http://wx.zzxapps.com/pages/preview/custGroup/index" frameborder="0"-->
<!--                        style="width: 300px;height: 560px;"></iframe>-->
<!--            </div>-->
        </el-dialog>
    </div>
</template>

<script>
    import Pagination from '@/components/Pagination'
    import WelcomeDetail from '@/views/custGroup/welcome/detail'
    import WelcomeSave from '@/views/custGroup/welcome/save'

    import ElementUI from 'element-ui'
    import Save from "../batchSend/save";
    // 修改 el-dialog 默认点击遮照为不关闭
    ElementUI.Dialog.props.closeOnClickModal.default = false;

    export default {
        data() {
            return {
                detailForms: {},
                edit: false,
                detailView: false,
                data: {
                    id: '',
                    groupName: '',
                    lordName: '',
                    groupTag: '',
                    createTime: ''
                },
                listData: [],
                // 详情页切换
                currentPanel: 'list',

                // 分页参数
                pagePagination: {
                    currentPage: 1,
                    pageSizes: [10, 15, 20, 25],
                    pageSize: 10,
                    total: 0
                },

                // 筛选
                formInline: {
                    page: 1,
                    limit: 10,
                    varLable: '',
                    varName: '',
                    token: localStorage.getItem('logintoken')
                },
                // 编辑弹窗
                editForm: {
                    name: '',
                    type: '',
                    status: true
                },
                messageType: '1',
            }
        },

        // 注册组件
        components: {
            Save,
            Pagination,
            WelcomeDetail,
            WelcomeSave
        },

        mounted() {
            this.queryDataHandle(1, 10)
        },

        methods: {
            queryDataHandle(page = 1, row = 10) {
                let that = this
                let payload = {
                    welcomeType: '1',
                    pageNum: page,
                    pageSize: row
                }

                this.$request("/api/welcome/selectAll/1_0", payload, "POST").then((data) => {
                    that.listData = data.rows
                    that.pagePagination['total'] = data.total
                    that.pagePagination['pageSize'] = data.row
                })
            },
            bianji(row) {
                this.editForm = row
                if(row.welcomeAlert == 'true'){
                    this.editForm.status = true
                }else{
                    this.editForm.status = false
                }
                this.edit = true
            },
            close() {
                this.detailView = false
            },
            xiangqing(row) {
                this.detailForms = row
                let that = this
                if(row.welcomeType == '1'){
                    that.detailForms.welcomeType = '入群欢迎语'
                }
                this.detailView = true
            },
            show() {
                this.currentPanel = 'save';
            },
            // 返回
            back() {
                this.edit = false;
            },
            // 详情页
            currentHandler(current, id) {
                this.data.id = id
                this.currentPanel = current
                if(current == 'list'){
                    this.queryDataHandle(1, 10)
                }
            },
            // 分页插件事件
            callFather(parm) {
                this.formInline.page = parm.currentPage
                this.formInline.limit = parm.pageSize
                this.getdata(this.formInline)
            },
            handleRemove(file) {
                console.log(file);
            },

            handleAvatarSuccess(res, file) {
                this.editForm.welcomeAppendices = this.$uri + res.paths[0];
            },

            handleAvatarChangeImg(file){
                if (this.beforeAvatarUpload(file.raw)){
                    this.editForm.welcomeAppendices = URL.createObjectURL(file.raw);
                    this.editForm.type = 2;
                }
            },
            deleteWelcome(row){
                this.$confirm('确定要删除吗?', '信息', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let that = this
                    this.$request("/api/welcome/deleteWelcome/1_0", row, "POST").then((data) => {
                        if (data.data == 1) {
                            this.$message({
                                message: "操作成功 ！",
                                type: 'success'
                            });
                        }
                        that.queryDataHandle(1,10)
                    })
                })
                    .catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        })
                    })
            },
            editWelcome(){
                this.editForm.welcomeType = '1'
                if(this.editForm.status == true){
                    this.editForm.welcomeAlert = 'true'
                }else{
                    this.editForm.welcomeAlert = 'false'
                }
                this.$request("/api/welcome/updateWelcome/1_0", this.editForm, "POST").then((data) => {
                    if (data.data == 1) {
                        this.$message({
                            message: "修改成功 ！",
                            type: 'success'
                        });
                    }
                    this.queryDataHandle(1, 10)
                })
            }
        }
    }
</script>

<style scoped>
    /deep/ .el-card__body {
        padding: 10px 12px;
    }

    .el-link {
        margin: 0 20px;
    }

    .el-dropdown-link {
        cursor: pointer;
        color: #409EFF;
    }

    .smallFont {
        font-weight: 600;
        font-size: 14px;
        margin: 6px 0;
    }

    >>> .el-textarea__inner {
        border: 0;
        resize: none; /* 这个是去掉 textarea 下面拉伸的那个标志，如下图 */
    }

    .el-row {
        margin: 10px 0;
    }


</style>
